<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :model="queryParams" :inline="true" label-width="100px">
			<el-form-item label="优惠券名称:" prop="name">
				<el-input v-model.trim="queryParams.name" clearable placeholder="请输入优惠券名称" />
			</el-form-item>
			<el-form-item label="用户限制:" prop="type">
				<el-select v-model="queryParams.type" placeholder="请选择用户限制">
					<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="使用范围:" prop="goodsType">
				<el-select v-model="queryParams.goodsType" placeholder="请选择用户限制">
					<el-option v-for="item in goodsTypeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="发放状态:" prop="provideStatus">
				<el-select v-model="queryParams.provideStatus" placeholder="请选择发放状态">
					<el-option v-for="item in provideStatusList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</el-form-item>
			<start-end-time ref="child" :get-time="getTime" title="有效日期:"></start-end-time>
		</el-form>
		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />
			<el-button v-hasPermi="['mall:coupon:add']" icon="el-icon-plus" type="primary" @click="handleAdd">新增 </el-button>
		</template>
		<el-table v-loading="loading" stripe :data="couponList">
			<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="50" />
			<el-table-column :formatter="emptyToString" align="center" label="优惠券名称" min-width="100" prop="name" />
			<el-table-column :formatter="emptyToNumber" align="center" label="使用门槛" min-width="120" prop="min" />
			<el-table-column :formatter="emptyToNumber" align="center" label="面值" min-width="120" prop="discount" />
			<el-table-column :formatter="emptyToNumber" align="center" label="总发行数" prop="total" min-width="120" />
			<el-table-column :formatter="emptyToNumber" align="center" label="已使用" prop="used" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="用户限制" prop="type" min-width="120">
				<template slot-scope="scope">
					<span v-if="scope.row.type === 0">全部用户</span>
					<span v-if="scope.row.type === 1">会员用户</span>
					<span v-if="scope.row.type === 2">新用户</span>
					<span v-if="scope.row.type === 3">指定用户</span>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="使用范围" prop="goodsType" min-width="120">
				<template slot-scope="scope">
					<span v-if="scope.row.goodsType === 0">全商品</span>
					<span v-if="scope.row.goodsType === 1">专区限制</span>
					<span v-if="scope.row.goodsType === 2">指定商品</span>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="发行状态" prop="provideStatus" min-width="120">
				<template slot-scope="scope">
					<el-switch
						v-model="scope.row.provideStatus"
						:active-value="0"
						:inactive-value="1"
						active-text="上架"
						class="switch"
						inactive-text="下架"
						@change="statusChange(scope.row.provideStatus, scope.row.id)"
					></el-switch>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="优惠券有效期" prop="goodsType" min-width="200">
				<template slot-scope="scope">{{ scope.row.startTime.split(' ')[0] + ' ~ ' + scope.row.endTime.split(' ')[0] }} </template>
			</el-table-column>
			<el-table-column :width="tableAction" align="center" fixed="right" header-align="center" label="操作">
				<template slot-scope="scope">
					<div class="table-action flex justify-center">
						<el-button v-hasPermi="['mall:coupon:edit']" type="primary" @click="handleDetails(scope.row)">详情 </el-button>
						<el-button v-hasPermi="['mall:coupon:remove']" type="danger" @click="handleDelete(scope.row)">删除 </el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<l-dialog v-model="detailsFlag" :show-button="false" title="优惠券详情" width="504px" @close="detailsFlag = false">
			<el-form :model="addContForm" label-width="100px" disabled>
				<el-form-item label="优惠券名称:">
					<el-input v-model.trim="details.name" readonly class="!w-[195px]"></el-input>
				</el-form-item>
				<el-form-item label="使用门槛:">
					<div class="flex items-center">
						<el-input v-model.trim.number="details.min" readonly class="!w-[195px]"> </el-input>
						<span class="ml-[5px]">元</span>
					</div>
				</el-form-item>
				<el-form-item label="总发行数:">
					<div class="flex items-center">
						<el-input v-model.trim.number="details.total" readonly class="!w-[195px]"> </el-input>
						<span class="ml-[5px]">张</span>
					</div>
				</el-form-item>
				<el-form-item label="已使用数:">
					<div class="flex items-center">
						<el-input v-model.trim.number="details.used" readonly class="!w-[195px]"> </el-input>
						<span class="ml-[5px]">张</span>
					</div>
				</el-form-item>
				<el-form-item label="用户限制:">
					<el-input v-if="details.type === 0" value="全部用户" readonly class="!w-[195px]"></el-input>
					<el-input v-if="details.type === 1" value="会员用户" readonly class="!w-[195px]"></el-input>
					<el-input v-if="details.type === 2" value="新用户" readonly class="!w-[195px]"></el-input>
					<el-input v-if="details.type === 3" value="指定用户" readonly class="!w-[195px]"></el-input>
				</el-form-item>
				<el-form-item v-if="details.type === 3">
					<div class="flex items-center mb-[11px]">
						已选择指定用户（<span class="text-[#F14A46]">{{ details.users.length || 0 }}</span
						>）个
					</div>
					<el-table :data="details.users" stripe max-height="300">
						<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="50"> </el-table-column>
						<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="uuid" min-width="120"> </el-table-column>
						<el-table-column :formatter="emptyToString" align="center" label="手机号码" prop="mobile" min-width="120"> </el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item label="使用范围:">
					<el-input v-if="details.goodsType === 0" value="全商品" readonly class="!w-[195px]"></el-input>
					<el-input v-if="details.goodsType === 1" value="专区限制" readonly class="!w-[195px]"></el-input>
					<el-input v-if="details.goodsType === 2" value="指定商品" readonly class="!w-[195px]"></el-input>
				</el-form-item>
				<el-form-item v-if="details.goodsType === 0">
					已选择商品（<span>{{ details.goods.length || 0 }}</span
					>）个
				</el-form-item>
				<el-form-item v-if="details.goodsType === 1">
					<div class="flex items-center mb-[11px]">
						已选择专区（<span class="text-[#F14A46]">{{ details.zones.length || 0 }}</span
						>）个
					</div>
					<el-table :data="[...details.zones]" stripe max-height="300">
						<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="50"> </el-table-column>
						<el-table-column :formatter="emptyToString" align="center" label="专区名称" prop="zoneName" min-width="120">
							<template slot-scope="scope">
								<span>
									{{ scope.row.zoneName }}
								</span>
							</template>
						</el-table-column>
						<el-table-column :formatter="emptyToString" align="center" label="专区图片" min-width="120">
							<template slot-scope="scope">
								<el-image :preview-src-list="[scope.row.zonePicture]" :src="scope.row.zonePicture" style="width: 48px; height: 48px"></el-image>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
				<el-form-item v-if="details.goodsType === 2">
					<div class="flex items-center mb-[11px]">
						已选择指定商品（<span class="text-[#F14A46]">{{ details.goods.length || 0 }}</span
						>）个
					</div>
					<el-table :data="details.goods" stripe max-height="300">
						<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="id" min-width="120"></el-table-column>
						<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="name" show-overflow-tooltip min-width="156">
							<template slot-scope="scope">
								<span style="color: var(--primary-color)">
									{{ scope.row.name }}
								</span>
							</template>
						</el-table-column>
						<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
							<template slot-scope="scope">
								<el-image :preview-src-list="[scope.row.picUrl]" :src="scope.row.picUrl" style="width: 48px; height: 48px"></el-image>
							</template>
						</el-table-column>
						<el-table-column :formatter="emptyToNumber" align="center" label="商品价格" prop="retailPrice" min-width="120" />
					</el-table>
				</el-form-item>
				<el-form-item label="优惠券有效期:">
					<el-input class="!w-[195px]" :value="details.startTime.split(' ')[0] + ' ~ ' + details.endTime.split(' ')[0]" placeholder="" readonly> </el-input>
				</el-form-item>
			</el-form>
		</l-dialog>
		<l-dialog v-model="addContFlag" ok-button-text="保存" title="增发优惠券" width="400px" @close="addContClose" @formClose="addContClose" @formSubmit="submitForm">
			<el-form :model="addContForm" label-width="130px">
				<el-form-item label="当前总发行量:">
					<el-input v-model.trim.number="addContForm.total" placeholder="" readonly>
						<template slot="append">张</template>
					</el-input>
				</el-form-item>
				<el-form-item label="新增发行量:">
					<el-input v-model.trim.number="discount" placeholder="">
						<template slot="append">张</template>
					</el-input>
				</el-form-item>
				<el-form-item label="更新后总发行量:">
					<el-input :value="addContForm.total + discount" placeholder="" readonly>
						<template slot="append">张</template>
					</el-input>
				</el-form-item>
			</el-form>
		</l-dialog>
		<l-dialog v-model="open" ok-button-text="保存" title="添加优惠券" width="700px" @close="close" @formClose="cancel" @formSubmit="submitForm">
			<el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="120px" status-icon style="margin-left: 0px">
				<el-form-item label="用户限制:" prop="type">
					<el-select v-model="form.type" placeholder="请选择用户限制" class="el-input-240">
						<el-option :value="0" label="全部用户"></el-option>
						<el-option :value="2" label="新人注册"></el-option>
						<el-option :value="1" label="会员用户"></el-option>
						<el-option :value="3" label="指定用户"></el-option>
					</el-select>
					<template v-if="form.type === 3">
						<div class="mt-[10px]">
							<el-button type="primary" @click="handleType">添加指定用户</el-button>
						</div>
						<div class="flex items-center">
							已选择用户（<span class="text-[#F14A46]">{{ selectUserList.length }}</span>）个
						</div>
					</template>
				</el-form-item>
				<el-form-item label="优惠券名称:" prop="name">
					<el-input v-model.trim="form.name" placeholder="请输入优惠券名称" class="!w-[240px]" maxlength="10" show-word-limit />
				</el-form-item>
				<el-form-item label="使用门槛:" prop="min">
					<div class="flex items-center text-[#333333]">
						<div style="margin-right: 10px">购物满</div>
						<el-input v-model.trim.number="form.min" placeholder="" style="width: 140px"> </el-input>
						<div style="margin-left: 10px">元，无门槛请设0</div>
					</div>
				</el-form-item>
				<el-form-item label="面值:" prop="discount">
					<div class="flex items-center">
						<spam class="mr-[6px]">减</spam>
						<el-input v-model.trim.number="form.discount" placeholder="" style="width: 140px"> </el-input>
						<span class="ml-[8px]">元</span>
					</div>
				</el-form-item>
				<el-form-item label="优惠券有效期:" prop="date">
					<el-date-picker v-model.trim="form.date" end-placeholder="结束日期" range-separator="至" start-placeholder="开始日期" type="daterange" value-format="yyyy-MM-dd"> </el-date-picker>
				</el-form-item>
				<el-form-item label="商品范围:" prop="desc" class="!mb-0">
					<el-radio v-model.trim="form.goodsType" :label="0">全部商品</el-radio>
					<el-radio v-model.trim="form.goodsType" :label="1">指定专区</el-radio>
					<el-radio v-model.trim="form.goodsType" :label="2">指定商品</el-radio>
				</el-form-item>
				<el-form-item v-if="form.goodsType === 1">
					<el-table :data="selectZoneListNow" stripe max-height="300">
						<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="100"> </el-table-column>
						<el-table-column :formatter="emptyToString" align="center" label="专区名称" prop="zoneName"> </el-table-column>

						<el-table-column :formatter="emptyToString" align="center" label="操作">
							<template slot-scope="scope">
								<el-button v-hasPermi="['mall:coupon:remove']" type="danger" @click="DeleteZone(scope.row)">删除 </el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-button class="mt-[10px]" type="primary" @click="addZone">添加专区</el-button>
				</el-form-item>
				<el-form-item v-if="form.goodsType === 2">
					<el-button class="mt-[10px] mb-[11px] !w-[142px]" type="primary" @click="handleAddShop">添加商品</el-button>
					<div class="flex items-center text-[12px] mb-[11px]">
						已选择（<span class="text-[#F14A46]">{{ specifyList.length }}</span
						>）个商品
					</div>
					<el-table v-if="specifyList.length > 0" :data="specifyList" stripe max-height="300">
						<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="100"> </el-table-column>
						<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="id" min-width="120"></el-table-column>
						<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="name" show-overflow-tooltip min-width="156">
							<template slot-scope="scope">
								<span style="color: var(--primary-color)">
									{{ scope.row.name }}
								</span>
							</template>
						</el-table-column>
						<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
							<template slot-scope="scope">
								<el-image :preview-src-list="[scope.row.picUrl]" :src="scope.row.picUrl" style="width: 48px; height: 48px"></el-image>
							</template>
						</el-table-column>
						<el-table-column :formatter="emptyToNumber" align="center" label="商品价格" prop="retailPrice" min-width="120" />
						<el-table-column :formatter="emptyToString" align="center" label="操作" fixed="right">
							<template slot-scope="scope">
								<el-button v-hasPermi="['mall:coupon:remove']" type="danger" @click="specifyList.splice(scope.$index, 1)">删除 </el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>

				<l-dialog v-model="innerVisible" append-to-body title="专区列表" width="30%" @close="zoneAddClose">
					<el-table
						ref="selectTable"
						:data="zoneList"
						:row-key="
							(row) => {
								return row.id;
							}
						"
						stripe
						@selection-change="selectGoodsChange"
					>
						<el-table-column :formatter="emptyToString" :reserve-selection="true" align="center" label="序号" type="selection" width="50"> </el-table-column>
						<el-table-column :formatter="emptyToString" align="center" label="专区名称" prop="zoneName"> </el-table-column>
					</el-table>
					<div slot="footer" class="dialog-footer mt-[10px]">
						<el-button type="primary" @click="zoneAddSubmit">保 存</el-button>
						<el-button @click="zoneAddClose">取 消</el-button>
					</div>
				</l-dialog>
			</el-form>

			<l-dialog v-model="addGoodsFlag" append-to-body title="指定用户" width="915px" @formSubmit="handleSubmitMsg" @formClose="handleClose2" @close="handleClose2">
				<el-form :model="goodsForm" inline>
					<el-row>
						<el-col :span="10">
							<el-form-item label="用户ID:">
								<el-input v-model.trim="goodsForm.uuid" maxlength="6" placeholder="请输入用户ID"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="手机号:">
								<el-input v-model.trim="goodsForm.mobile" placeholder="请输入手机号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-button icon="el-icon-search" type="primary" @click="queryGoodsList">搜索 </el-button>
						</el-col>
					</el-row>
				</el-form>
				<div class="mb-[10px]">
					(已选择 <span class="text-[#F14A46]">{{ selectUserList.length }}</span
					>个)
				</div>
				<el-table
					ref="multipleTable"
					:data="goodsList"
					:row-key="
						(row) => {
							return row.id;
						}
					"
					class="table"
					stripe
					style="width: 100%"
					@selection-change="selectUserChange"
				>
					<el-table-column :formatter="emptyToString" :reserve-selection="true" type="selection" width="55"> </el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="序号" prop="name" type="index"></el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="uuid"></el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="手机号" prop="mobile"></el-table-column>
				</el-table>
				<pagination :limit.sync="goodsForm.pageSize" :page.sync="goodsForm.pageNum" :total="goodsTotal" @pagination="getGoodsList" />
			</l-dialog>
		</l-dialog>

		<l-dialog v-model="showSpecif" :show-button="false" width="913px" title="添加商品" @close="showSpecif = false">
			<el-form ref="specifyParam" :inline="true" label-width="100px" :model="specifyParams">
				<el-form-item label="商品ID:" prop="goodsId">
					<el-input v-model.trim="specifyParams.goodsId" class="!w-[240px]" maxlength="6" show-word-limit clearable placeholder="请输入商品ID"></el-input>
				</el-form-item>
				<el-form-item label="商品名称:" prop="goodsName">
					<el-input v-model.trim="specifyParams.goodsName" class="!w-[240px]" maxlength="30" show-word-limit clearable placeholder="请输入商品名称"></el-input>
				</el-form-item>
				<el-form-item label="供应商名称:">
					<el-input v-model.trim="specifyParams.userName" class="!w-[240px]" maxlength="30" show-word-limit clearable placeholder="请输入供应商名称"></el-input>
				</el-form-item>
				<el-form-item label="商品分类:" prop="cate">
					<el-cascader v-model="specifyParams.cate" class="el-input-240" :props="props" clearable expand-trigger="hover" placeholder="请选择分类" @change="handleCategoryChange" />
				</el-form-item>
				<el-form-item>
					<div class="page-search-btn">
						<el-button icon="el-icon-search" type="primary" @click="handleSpecifyQuery">搜索</el-button>
						<el-button icon="el-icon-refresh" type="primary" plain @click="handleSpecifyReset">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
			<div class="flex items-center text-[12px] mb-[11px]">
				已选择（<span class="text-[#F14A46]">{{ specifyList.length }}</span
				>）个商品
			</div>
			<el-table v-loading="specifyLoading" :data="specifyData" stripe @selection-change="handleSelectionChange" @sort-change="handleSpSortChange">
				<el-table-column type="selection" width="55" align="center"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="50"> </el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="id" min-width="120"></el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="商品名称" prop="name" show-overflow-tooltip min-width="156">
					<template slot-scope="scope">
						<span style="color: var(--primary-color)">
							{{ scope.row.name }}
						</span>
					</template>
				</el-table-column>

				<el-table-column :formatter="emptyToString" align="center" label="商品图片" min-width="120">
					<template slot-scope="scope">
						<el-image :preview-src-list="[scope.row.picUrl]" :src="scope.row.picUrl" style="width: 48px; height: 48px"></el-image>
					</template>
				</el-table-column>
				<el-table-column :formatter="emptyToNumber" align="center" label="供应商名称" prop="userName" min-width="120" />
				<el-table-column :formatter="emptyToNumber" align="center" label="商品价格（元）" prop="retailPrice" sortable min-width="156" />
				<el-table-column :formatter="emptyToNumber" align="center" label="供应价格（元）" prop="supplyPrice" sortable min-width="156" />
			</el-table>
			<pagination v-show="total > 0" :limit.sync="specifyParams.pageSize" :page.sync="specifyParams.pageNum" :total="specifyTotal" @pagination="getSpecify" />
			<div class="flex justify-center items-center mt-[22px]">
				<el-button type="primary" class="!w-[236px] !h-[60px]" @click="handleSpecifySubmit">确定</el-button>
				<el-button class="!w-[236px] !h-[60px] !ml-[20px]" @click="handleSpecifyClose">取消</el-button>
			</div>
		</l-dialog>
	</l-page>
</template>

<script>
import { listUser } from '@/api/mall/user';
import { getZoneList } from '@/api/mall/prefecture';
import { addCoupon, delCoupon, exportCoupon, getCoupon, listCoupon, updateCoupon } from '@/api/mall/coupon';
import debounce from 'lodash/debounce';
import tableMixins from '@/mixins/table';
import snakeCase from 'lodash/snakeCase';
import { listChild, listParent } from '@/api/mall/category';

const defaultTypeOptions = [
	{
		label: '通用领券',
		value: 0,
	},
	{
		label: '注册赠券',
		value: 1,
	},
	{
		label: '兑换码',
		value: 2,
	},
];

export default {
	name: 'Coupon',
	components: {},
	filters: {
		formatStatus(status) {
			if (new Date(status) > new Date()) {
				return '正常';
			} else {
				return '过期';
			}
		},
		formatType(type) {
			for (let i = 0; i < defaultTypeOptions.length; i++) {
				if (type === defaultTypeOptions[i].value) {
					return defaultTypeOptions[i].label;
				}
			}
			return '';
		},
		formatGoodsType(goodsType) {
			if (goodsType === 0) {
				return '全场通用';
			} else if (goodsType === 1) {
				return '指定分类';
			} else {
				return '指定商品';
			}
		},
	},
	mixins: [tableMixins],
	data() {
		return {
			typeList: [
				{
					value: null,
					label: '全部',
				},
				{
					value: 0,
					label: '全部用户',
				},
				{
					value: 2,
					label: '新人注册',
				},
				{
					value: 1,
					label: '会员用户',
				},
				{
					value: 3,
					label: '指定用户',
				},
			],
			goodsTypeList: [
				{
					value: null,
					label: '全部',
				},
				{
					value: 0,
					label: '全商品',
				},
				{
					value: 1,
					label: '专区限制',
				},
				{
					value: 2,
					label: '指定商品',
				},
			],
			provideStatusList: [
				{
					value: null,
					label: '全部',
				},
				{
					value: 0,
					label: '上架',
				},
				{
					value: 1,
					label: '下架',
				},
			],
			specifyList: [],
			specifyData: [],
			specifyLoading: false,
			showSpecif: false,
			specifyTotal: 0,
			specifyParams: {
				pageNum: 1,
				pageSize: 10,
				category: null,
				cate: [],
				zoneId: null,
				goodsId: null,
				goodsName: null,
				userName: null,
			},
			props: {
				lazy: true,
				lazyLoad(node, resolve) {
					const { level, value } = node;
					if (level === 0) {
						listParent().then((response) => {
							const { data } = response;
							const nodes = data.map((item) => ({
								value: item.id,
								label: item.name,
								leaf: false,
							}));
							resolve(nodes);
						});
					} else {
						listChild(value).then((response) => {
							const { data } = response;
							const nodes = data.map((item) => ({
								value: item.id,
								label: item.name,
								leaf: true,
							}));
							resolve(nodes);
						});
					}
				},
			},
			// 遮罩层
			loading: true,
			// 总条数
			total: 0,
			// 优惠券信息及规则表格数据
			couponList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: null,
				type: null,
				goodsType: null,
				provideStatus: null,
				startTimeStr: null,
				endTimeStr: null,
			},
			// 表单参数
			form: {
				tag: 0,
				goodsType: 0,
				type: 0,
			},
			selectZoneList: [],
			selectZoneListNow: [],
			// 表单校验
			selectList: [],
			innerVisible: false,
			zoneList: [],
			rules: {
				name: [{ required: true, message: '优惠券名称不能为空', trigger: 'blur' }],
				min: [
					{ required: true, message: '使用门槛不能为空' },
					{ type: 'number', message: '使用门槛为数字值' },
				],
				discount: [
					{ required: true, message: '面值不能为空' },
					{ type: 'number', message: '面值为数字值' },
				],
				type: [{ required: true, message: '请选择用户限制', trigger: 'change' }],
				date: [{ required: true, message: '请选择优惠卷日期', trigger: 'change' }],
			},
			type: [
				{ label: '通用券', value: 0 },
				{ label: '会员券', value: 1 },
				{ label: '新用户', value: 2 },
			],
			status: [
				{ label: '正常使用', value: 0 },
				{ label: '过期', value: 1 },
				{ label: '下架', value: 2 },
			],
			addContFlag: false,
			addContForm: {},
			discount: '',
			details: {
				startTime: '',
				endTime: '',
			},
			detailsFlag: false,
			addGoodsFlag: false,
			goodsList: [],
			goodsTotal: 0,
			selectListNow: [],
			goodsForm: {
				pageNum: 1,
				pageSize: 10,
				name: null,
			},
			selectUserList: [],
		};
	},
	created() {
		this.getList();
		this.getZoneList();
	},
	methods: {
		handleAddShop() {
			this.showSpecif = true;
			this.open = false;
			this.handleSpecifyQuery();
		},
		handleSpecifyQuery() {
			this.specifyParams.pageNum = 1;
			this.getSpecify();
		},
		handleSpecifyReset() {
			this.$refs.specifyParam.resetFields();
			this.specifyParams.cate = [];
			this.getSpecify();
		},
		handleSelectionChange(val) {
			this.specifyList = val;
		},
		handleSpSortChange(sort) {
			this.specifyParams.sortStr = snakeCase(sort.prop);
			this.specifyParams.sortDesc = sort.order;
			this.getSpecify();
		},
		handleSpecifySubmit() {
			this.showSpecif = false;
			this.open = true;
		},
		handleSpecifyClose() {
			this.specifyList = [];
			this.showSpecif = false;
			this.open = true;
		},
		handleType() {
			this.queryGoodsList();
			this.addGoodsFlag = true;
		},
		getSpecify() {
			this.specifyLoading = true;
			this.$request
				.post('/mall/goods/list', this.specifyParams)
				.then((response) => {
					this.specifyData = response.data.records;
					this.specifyTotal = response.data.total;
				})
				.finally(() => {
					this.specifyLoading = false;
				});
		},
		handleCategoryChange(value) {
			this.specifyParams.category = value[value.length - 1];
		},
		getTime(startTime, endTime) {
			this.queryParams.startTimeStr = startTime;
			this.queryParams.endTimeStr = endTime;
		},
		statusChange(event, row) {
			this.$request
				.post('/mall/coupon/edit', {
					id: row,
					provideStatus: event,
				})
				.then(() => {
					this.msgSuccess('编辑成功');
					this.getList();
				});
		},
		handleSubmitMsg() {
			this.addGoodsFlag = false;
		},
		submitMsg() {
			if (!this.selectUserList.length) {
				this.$message.error('请选择指定用户!');
				return;
			}
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.date.length) {
						this.form.startTimeStr = this.form.date[0] + ' 00:00:00';
						this.form.endTimeStr = this.form.date[1] + ' 23:59:59';
					} else {
						this.$message.error('请选择时间!');
						return;
					}
					if (this.form.goodsType === 1 && !this.selectZoneListNow.length) {
						this.$message.error('请选择专区!');
						return;
					} else {
						let arr = [];
						for (let i = 0; i < this.selectZoneListNow.length; i++) {
							arr.push(this.selectZoneListNow[i].id);
						}
						this.form.goodsValue = arr.join(',');
					}
					// this.form.uuids = this.selectUserList
					let uuids = [];

					for (let i = 0; i < this.selectUserList.length; i++) {
						uuids.push(this.selectUserList[i].uuid);
					}
					this.form.uuids = uuids;
					addCoupon(this.form).then((response) => {
						this.msgSuccess('新增成功');
						this.close();
						this.handleClose2();
						this.getList();
					});
				} else {
					this.$message.error('请填写其他几项必填项!');
				}
			});
		},
		selectUserChange(value) {
			this.selectUserList = value;
		},
		queryGoodsList() {
			this.goodsForm.pageNum = 1;
			this.getGoodsList();
		},
		handleClose2() {
			this.goodsForm = {
				pageNum: 1,
				pageSize: 10,
				name: null,
			};
			if (this.$refs.multipleTable) {
				this.$refs.multipleTable.clearSelection();
			}
			this.$set(this.form, 'type', 0);
			this.selectUserList = [];
			this.addGoodsFlag = false;
		},

		getGoodsList() {
			listUser(this.goodsForm).then((response) => {
				this.goodsList = response.data.records;
				this.goodsTotal = response.data.total;
			});
		},
		/** 查询优惠券信息及规则列表 */
		selectGoodsChange(value) {
			this.selectZoneList = value;
		},
		addContClose() {
			this.discount = '';
			this.addContFlag = false;
		},
		zoneAddClose() {
			this.selectZoneList = [];
			this.$refs.selectTable.clearSelection();
			this.innerVisible = false;
			this.open = true;
		},
		close() {
			if (this.$refs.selectTable) {
				this.$refs.selectTable.clearSelection();
			}
			this.selectUserList = [];
			this.specifyList = [];
			this.selectZoneListNow = [];
			this.selectZoneList = [];
			this.open = false;
		},
		zoneAddSubmit() {
			this.selectZoneListNow = this.selectZoneList;
			this.innerVisible = false;
			this.open = true;
		},
		DeleteZone(value) {
			for (let i = 0; i < this.selectZoneListNow.length; i++) {
				if (value.id == this.selectZoneListNow[i].id) {
					this.selectZoneListNow.splice(i, 1);
				}
			}
		},
		addZone() {
			this.innerVisible = true;
			this.open = false;
			this.$nextTick(() => {
				this.selectZoneListNow.forEach((row) => {
					this.$refs.selectTable.toggleRowSelection(row, true);
				});
			});
		},
		getZoneList() {
			getZoneList({}).then((res) => {
				this.zoneList = res.data;
			});
		},
		getList() {
			this.loading = true;
			listCoupon(this.queryParams)
				.then((response) => {
					this.couponList = response.data.records;
					this.total = response.data.total;
					this.setActionWidth();
				})
				.finally(() => {
					this.loading = false;
				});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.selectZoneListNow = [];
			this.form = {
				id: null,
				name: null,
				desc: null,
				tag: 0,
				total: null,
				discount: null,
				min: null,
				limit: null,
				type: 0,
				status: 0,
				goodsType: 0,
				date: [],
				goodsValue: null,
				code: null,
				timeType: 1,
				days: null,
				startTime: null,
				endTime: null,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.$refs.child.resetTime();
			this.resetForm('queryForm');
			this.handleQuery();
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			console.log(this.open);
			this.title = '添加优惠券信息及规则';
		},
		/** 编辑按钮操作 */
		handleUpdate(row) {
			getCoupon(row.id).then((response) => {
				this.addContForm = response.data;
				this.addContFlag = true;
			});
		},
		handleDetails(row) {
			getCoupon(row.id).then((response) => {
				this.details = response.data;
				this.detailsFlag = true;
			});
		},
		/** 提交按钮 */
		addContSubmit() {
			if (!this.discount) {
				this.$message.error('请输入新增发行量');
				return;
			}
			let obj = {
				total: Number(this.addContForm.total + this.discount),
				id: this.addContForm.id,
			};
			updateCoupon(obj).then((response) => {
				this.msgSuccess('增发成功!');
				this.addContClose();
				this.getList();
			});
		},
		submitForm: debounce(
			function () {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						if (this.form.date.length) {
							this.form.startTimeStr = this.form.date[0] + ' 00:00:00';
							this.form.endTimeStr = this.form.date[1] + ' 23:59:59';
						} else {
							this.$message.error('请选择时间!');
							return;
						}
						if (+this.form.goodsType === 1 && !this.selectZoneListNow.length) {
							this.$message.error('请选择专区!');
							return;
						} else if (+this.form.goodsType === 2) {
							this.form.goodsValue = this.specifyList.map((item) => item.id).join(',');
						} else {
							let arr = [];
							for (let i = 0; i < this.selectZoneListNow.length; i++) {
								arr.push(this.selectZoneListNow[i].id);
							}
							this.form.goodsValue = arr.join(',');
						}

						let uuids = [];

						for (let i = 0; i < this.selectUserList.length; i++) {
							uuids.push(this.selectUserList[i].uuid);
						}
						this.form.uuids = uuids;
						this.form.total = 10;
						addCoupon(this.form).then(() => {
							this.msgSuccess('新增成功');
							this.open = false;
							this.getList();
						});
					}
				});
			},
			1500,
			{
				leading: true,
				trailing: false,
			}
		),
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$confirm('是否确认删除优惠券信息及规则编号为"' + ids + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delCoupon([ids]);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有优惠券信息及规则数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportCoupon(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
<style lang="scss" scoped>
.app-container {
	background: #ffffff;
	min-height: calc(100vh - 84px);
}

.bottom-btn-box {
	position: relative;
	display: flex;
	justify-content: center;
	padding-top: 20px;

	> div {
		position: absolute;
		font-size: 14px;
		height: 60px;
		line-height: 60px;
		left: 80px;

		span {
			color: #f14a46;
		}
	}

	.btn {
		width: 236px;
		height: 60px;
		padding: 0;
		font-size: 18px;
	}

	.btn2 {
		background: #1a2483;
		border: none;
	}
}

.allDiv {
	display: flex;
	justify-content: space-between;

	.box-card {
		flex: 1;
		margin-top: 24px;
		margin-left: 40px;
		// margin-bottom: 200px;
		margin-right: 80px;
		position: relative;
		// display: flex;
		// justify-content: start;
		//   &.right_10{
		//   margin-right: 10px;
		//   }
		//   &.left_10{
		//     margin-left: 10px;
		//   }
		// }
	}

	.flex_info {
		display: flex;
		justify-content: flex-start;

		.absolute_info {
			margin-left: 81px;
			margin-top: 5px;
			right: 126px;
			width: 266px;
			height: 287px;
			border: 1px dashed #808a97;
			border-radius: 4px;
			padding: 35px 32px;
			font-size: 12px;
			font-family: Microsoft YaHei;

			div {
				margin-bottom: 20px;
			}
		}
	}

	.color_box {
		width: 216px;
		height: 120px;
		margin-top: 28px;
		margin-left: 21px;
		border-radius: 8px;
		overflow: hidden;

		&:hover {
			cursor: pointer;
		}

		.register_wel,
		.message_push {
			text-align: center;
			line-height: 60px;
			font-size: 16px;
			color: #2c333f;
			background: #ffffff;

			&.active {
				background: #6373ee;
				color: #ffffff;
			}
		}
	}
}
</style>
